import GeekIcon from "@shared/geekIcon";
import { HistoryType, removeHistory } from "@slice/history";
import { useTypedDispatch } from "@store/index";
import { useNavigate } from "react-router-dom";

interface Props {
  item: HistoryType;
}

export default function HistoryItem({ item }: Props) {
  const dispatch = useTypedDispatch();
  const navigate = useNavigate();
  return (
    <li onClick={() => navigate(`/search/${item.name}`)}>
      {item.name}
      <GeekIcon
        type={"iconbtn_essay_close"}
        onClick={(event) => {
          event.stopPropagation();
          dispatch(removeHistory(item.id));
        }}
      />
    </li>
  );
}
